<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="goods.css">
</head>

<body>
    <div class="goodsinfo">
        <form action="" class="choose">
            <ul></ul>
        </form>
    </div>
    <script>
        var sku = [{
            "id": 6,
            "goodsId": 38,
            "goodsSku": { "颜色": "白色", "内存": "2G" },
            "goodsCode": "x01",
            "goodsSpec": "",
            "saleNumber": 0,
            "total": 100,
            "shopPrice": "1.00",
            "marketPrice": "10.00",
            "status": 1
        },
        {
            "id": 7,
            "goodsId": 38,
            "goodsSku": { "颜色": "白色", "内存": "4G" },
            "goodsCode": "x02",
            "goodsSpec": "",
            "saleNumber": 0,
            "total": 100,
            "shopPrice": "2.00",
            "marketPrice": "9.00",
            "status": 1
        },
        {
            "id": 8,
            "goodsId": 38,
            "goodsSku": { "颜色": "黑色", "内存": "2G" },
            "goodsCode": "x03",
            "goodsSpec": "",
            "saleNumber": 0,
            "total": 100,
            "shopPrice": "3.00",
            "marketPrice": "8.00",
            "status": 1
        },
        {
            "id": 9,
            "goodsId": 38,
            "goodsSku": { "颜色": "黑色", "内存": "4G" },
            "goodsCode": "x04",
            "goodsSpec": "",
            "saleNumber": 0,
            "total": 100,
            "shopPrice": "4.00",
            "marketPrice": "7.00",
            "status": 1
        }
        ];
        //初始化
        let obj = {
            '颜色': [],
            '内存': [],
            '库存': [],
            '单价': [],
        };
        let ul = document.querySelector('ul');
        (function info() {
            //将物品信息分类渲染到obj
            sku.forEach((v, i) => {
                if (obj['颜色'].indexOf(v.goodsSku['颜色']) == -1)
                    obj['颜色'].push(v.goodsSku['颜色'])
                if (obj['内存'].indexOf(v.goodsSku['内存']) == -1)
                    obj['内存'].push(v.goodsSku['内存'])
                if (obj['库存'].indexOf(v.total) == -1)
                    obj['库存'].push(v.total)
                if (obj['单价'].indexOf(v.shopPrice) == -1)
                    obj['单价'].push(v.shopPrice)
            });
            show(obj)
        })()
        //渲染页面
        function show(obj) {
            for (const key in obj) {
                let li = document.createElement('li')
                li.className = 'product';
                let dl = document.createElement('dl')
                let dt = document.createElement('dt')
                dt.innerText = key + '：';
                let dd = document.createElement('dd')
                if (key == '颜色') {
                    obj['颜色'].forEach(v => {
                        let a = document.createElement('a')
                        a.innerText = v
                        dd.appendChild(a)
                    });
                }
                if (key == '内存') {
                    obj['内存'].forEach(v => {
                        let a = document.createElement('a')
                        a.innerText = v
                        dd.appendChild(a)
                    });
                }
                if (key == '库存') {
                    obj['库存'].forEach(v => {
                        let a = document.createElement('a')
                        a.innerText = v
                        dd.appendChild(a)
                    });
                }
                if (key == '单价') {
                    obj['单价'].forEach(v => {
                        let a = document.createElement('a')
                        a.innerText = v
                        dd.appendChild(a)
                    });
                }
                let input = document.createElement('input')
                dd.appendChild(input);
                dl.appendChild(dt);
                dl.appendChild(dd)
                li.appendChild(dl);
                ul.appendChild(li)
            }
            let temp = document.querySelectorAll('dd a:nth-of-type(1)')
            temp.forEach(v => {
                v.className = 'selected'
            });
        }
    </script>
</body>

</html>